<template>
  <f7-page>
    <f7-navbar title="查人" back-link="Back"></f7-navbar>
    <f7-list inline-labels no-hairlines-md>
      <f7-list-input
        label="姓名"
        type="text"
        placeholder="Your name"
        :value="name"
        @input="name = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="手机号"
        type="text"
        placeholder="Your phoplenumber"
        :value="phoplenumber"
        @input="phoplenumber = $event.target.value"
        clear-button
      ></f7-list-input>
      <f7-list-input
        label="身份证号"
        type="text"
        placeholder="Your idcard"
        :value="idcard"
        @input="idcard = $event.target.value"
        clear-button
      ></f7-list-input>
    </f7-list>
    <f7-button fill raised @click="sousuo()">搜索</f7-button>
  </f7-page>
</template>
<script>
export default {
  data() {
    return {
      name: "",
      phoplenumber: "",
      idcard: ""
    };
  },
  methods: {
    sousuo() {
      let apiDocInfo = {
        name: this.name,
        phoplenumber: this.phoplenumber,
        idcard: this.idcard
      };
      this.$store.commit("setApiInfo", apiDocInfo);
      this.$f7router.navigate("/peoplesearchresults/");
    }
  }
};
</script>